import { Component, ReactNode } from "react"
//引入actionCreator
import actionCreator from "../../store/actions/actionCreator"
//引入connect高阶组件
import { connect } from "react-redux"
//引入action类型
import { FETCH_PRODUCT } from "../../store/actions/products"

interface Iprops {
    [t: string]: any
}

// 将状态从props中映射下来,处理之后映射给组件

const mapStateFromProps = (state: any): object => {
    console.log(state)
    return {
        products: state.productReducer
    }
}
//将disptach从状态中映射下来,最终映射到组件的props
const mapDispatchToProps = (dispatch: any): object => {
    // console.log(dispatch)
    return {
        getProduct() {
            dispatch(actionCreator({ type: FETCH_PRODUCT }))
        }
    }
}
class Product extends Component<Iprops, {}> {
    componentDidMount() {
        this.props.getProduct()
    }
    render(): ReactNode {
        console.log(this.props)
        let { products } = this.props;
        let lis = products.map((item: any): React.ReactElement => {
            return (
                <li key={item.id}>{item.title}</li>
            )
        })
        return (
            <fieldset>
                <legend>商品</legend>
                <ul>
                    {lis}
                </ul>
            </fieldset>
        )
    }
}

export default connect(mapStateFromProps, mapDispatchToProps)(Product)